<template>
  <div>
    <top></top>
    <Frame3 title="创建新项目">
      <el-form style="margin: 20px">
        <el-form-item label="项目名称">
          <el-input v-model="projectName" clearable class="input_style" style="width: 20%;margin-left: 40px"></el-input>
        </el-form-item>
        <el-form-item label="从现有人员选择">
          <el-transfer
              :titles="['团队成员', '已选成员']"
              v-model="members"
              :data="data">
          </el-transfer>
        </el-form-item>

        <el-form-item label="添加新成员">
          <el-input placeholder="输入邮箱，多个邮箱用逗号隔开" v-model="emails" clearable
                    class="input_style" style="width: 20%;margin-left: 27px">
          </el-input>
        </el-form-item>

        <el-form-item label="项目描述">
          <el-input v-model="projectDescription"
                    type="textarea" clearable class="input_style"
                    style="width: 40%;margin-left: 40px"
                    :autosize="{ minRows: 6, maxRows: 12}"
          ></el-input>
        </el-form-item>

        <el-form-item style="margin-left: 150px">
          <el-button type="primary" @click="onSubmit" round size="mini">提交</el-button>
          <el-button type="primary" @click="Return" round size="mini">返回</el-button>
        </el-form-item>
      </el-form>
    </Frame3>
    <bottom></bottom>
  </div>

</template>

<script>
import top from "../base/top";
import Frame3 from "../lys/Frame";
import bottom from "../base/bottom";

// 拿到简单成员信息
import {partnerSimpleInfo} from "../lys/data/global"

export default {
  name: "CreateNewProject",
  components:{
    top,Frame3,bottom
  },
  data(){
    return{
      projectName:'',
      data: [],
      members: [],
      emails:"",
      projectDescription:''
    }
  },
  mounted(){
    this.getPartners()
  },
  methods:{
    onSubmit(){
      this.projectDescription = this.projectDescription.trim()
      this.projectName = this.projectName.trim()
      this.emails = this.emails.trim()
      if(!this.projectName || !this.projectDescription){
        alert("项目名和描述不能为空！")
      }
      else{
        let config = {
          url:"/cbug/project/create",
          method:"post",
          data:{
            token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJle",
            projectName:this.projectName,
            members:this.members,
            emails:this.emails.split(","),
            projectDescription: this.projectDescription
          }
        }
        console.log(config)
        // 发送到服务器上

      }
    },
    getPartners(){
      let config = {
        url:"/cbug/project/getProjectPartner",
        method:"post",
        data:{
          token:"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJle"
        }
      }
      // 向服务器请求得到简单联系人信息

      // 格式化简单联系人信息用于穿梭框
      partnerSimpleInfo.partners.forEach(p=>{
        this.data.push({label:p.nickName,key:p.partnerId})
      })
    }
  }

}
</script>

<style scoped>

</style>
